<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ dataForm.classifyId ? "编辑呼叫器分类" : "新增呼叫器分类" }}</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="rules"
      >
        <el-row>
          <el-form-item prop="classifyName" label="分类名称">
            <el-input
              v-model="dataForm.classifyName"
              placeholder="请输入分类名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="classifyContent" label="分类描述">
            <el-input
              type="textarea"
              v-model="dataForm.classifyContent"
              placeholder="请输入分类描述"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="classifyLogo" label="分类Logo">
            <upload-img
              class="upload-img"
              @uploadFileList="getLogoUrl"
              folder="beeperClassify"
            >
              <img
                v-if="dataForm.classifyLogo"
                width="100%"
                :src="dataForm.classifyLogo"
                alt=""
              />
              <div class="tip">
                <i class="el-icon-upload" v-if="!dataForm.classifyLogo"></i>
                <div v-if="!dataForm.classifyLogo" class="el-upload__text">
                  将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import BeeperClassifyApi from "@/api/equip/beeperClassify";
import BeeperApi from "@/api/equip/beeper";
import UploadImg from "@/components/UploadImg";
export default {
  data() {
    return {
      dataForm: {
        classifyId: "",
        // parentClassifyId: "",
        classifyName: "",
        classifyContent: "",
        classifyLogo: "",
        remark: ""
      },
      beeperClassifyList: [],
      rules: {
        classifyName: [
          { required: true, message: "请输入分类名称", trigger: "focus" }
        ],
        classifyContent: [
          { required: true, message: "请选择分类描述", trigger: "focus" }
        ]
      }
    };
  },
  components: {
    UploadImg
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.query.id) {
        this.dataForm.classifyId = this.$route.query.id;
        this.getData();
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData() {
      BeeperClassifyApi.getBeeperClassify({
        id: this.dataForm.classifyId
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data);
      });
    },
    getLogoUrl(val) {
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
      }
      this.dataForm.classifyLogo = val[0];
    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.dataForm.classifyId) {
              this.editData();
            } else {
              this.addData();
            }
          });
        }
      });
    },
    addData() {
      let param = {
        classifyName: this.dataForm.classifyName,
        classifyContent: this.dataForm.classifyContent,
        classifyLogo: this.dataForm.classifyLogo,
        remark: this.dataForm.remark
      };
      BeeperClassifyApi.addBeeperClassify(param).then(res => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    editData() {
      let param = {
        classifyId: this.dataForm.classifyId,
        classifyName: this.dataForm.classifyName,
        classifyContent: this.dataForm.classifyContent,
        classifyLogo: this.dataForm.classifyLogo,
        remark: this.dataForm.remark
      };
      BeeperClassifyApi.editBeeperClassify(param).then(() => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/equip/beeperClassifyManagement" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.upload-img {
  &::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
}
</style>
